<template>
    <div class="app-container">
        <a-row :gutter="10">
            <a-col :span="5">
                <a-card>
                    <SearchTree placeholder="请输入部门名称搜索" :data-list="tree.departList" @select="onTreeSelect" />
                </a-card>
            </a-col>
            <a-col :span="19">
                <a-card>
                    <BasicTable ref="tableRef" :params="params" :columns="columns" :query="query" @select-change="selectChange">
                        <template #form>
                            <a-form-item label="用户名" name="username">
                                <a-input v-model:value="params.username" placeholder="请输入用户名" />
                            </a-form-item>
                            <a-form-item label="工号" name="workNo">
                                <a-input v-model:value="params.workNo" placeholder="请输入工号" />
                            </a-form-item>
                            <a-form-item label="手机号" name="phone">
                                <a-input v-model:value="params.phone" placeholder="请输入手机号" />
                            </a-form-item>
                        </template>
                        <template #button>
                            <a-button v-permission="'system:user:delete'" type="primary" danger :disabled="isDisable" @click="batchDel(batchDelete, tableRef)">
                                <template #icon>
                                    <DeleteOutlined />
                                </template>
                                删除
                            </a-button>
                            <a-button v-permission="'system:user:add'" type="primary" @click="open(modalRef)">
                                <template #icon>
                                    <PlusOutlined />
                                </template>
                                新增
                            </a-button>
                        </template>
                        <template #table="{ body }">
                            <template v-if="body.column.key === 'status'">
                                <Switch v-model:checked="body.record.status" @change="switchChange(updateStatus, body.record.id, $event)" />
                            </template>
                            <template v-if="body.column.key === 'action'">
                                <a-button v-permission="'system:user:password'" type="link" @click="open(resetPassRef, { id: body.record.id })">
                                    <template #icon>
                                        <KeyOutlined />
                                    </template>
                                    重置密码
                                </a-button>
                                <a-button v-permission="'system:user:edit'" type="link" @click="open(modalRef, body.record)">
                                    <template #icon>
                                        <EditOutlined />
                                    </template>
                                    编辑
                                </a-button>
                                <a-popconfirm v-if="body.record.isAdmin === 0" title="确定要删除吗?" @confirm="del(deleteById, body.record.id, tableRef)">
                                    <a-button v-permission="'system:user:delete'" type="link">
                                        <template #icon>
                                            <DeleteOutlined />
                                        </template>
                                        删除
                                    </a-button>
                                </a-popconfirm>
                            </template>
                        </template>
                    </BasicTable>
                </a-card>
            </a-col>
        </a-row>
        <Drawer ref="modalRef" @close="refresh(tableRef)" />
        <reset-pass ref="resetPassRef" />
    </div>
</template>
<script setup name="UserModule">
import { reactive, ref } from 'vue'
import { KeyOutlined, DeleteOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons-vue'
import { query, deleteById, batchDelete, updateStatus } from '/@/api/System/User/index'
import { list } from '/@/api/System/Depart/index'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'
import { useBasicTable } from '@iframe/tools/mixins/BasicTableMixins'
import { SearchTree, Switch, BasicTable } from '@iframe/tools/components'
import Drawer from './Drawer.vue'
import ResetPass from './ResetPass/Modal.vue'

const { refresh, isDisable, batchDel, selectChange, switchChange, del, open } = useBasicTable()
const tableRef = ref()
const resetPassRef = ref()
const modalRef = ref()
const params = reactive({})
const tree = ref({
    departList: []
})
const columns = [
    {
        title: '用户名',
        dataIndex: 'username',
        key: 'username'
    },
    {
        title: '姓名',
        dataIndex: 'realname',
        key: 'realname'
    },
    {
        title: '工号',
        dataIndex: 'workNo',
        key: 'workNo'
    },
    {
        title: '手机号',
        dataIndex: 'phone',
        key: 'phone'
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 130,
        align: 'center'
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 300
    }
]

const initDepart = () => {
    list().then(result => {
        if (result.code === SUCCESS_CODE) {
            tree.value.departList = result.data
        }
    })
}
const onTreeSelect = selectKeys => {
    params.sysDepartId = selectKeys[0]
    tableRef.value.handleRefresh()
}
initDepart()
</script>
<style lang="less" scoped>
.app-container {
    :deep(.basic-table .ant-form-item) {
        width: 250px;
    }
}
</style>
